<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>生命周期</h1>
    <hr>
    <div id="app">
        {{message}}
        <button @click="add">点击我</button>
    </div>
    <button onclick="app.$destroy()">销毁</button>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{ 
            message:1
        },
        methods:{
            add:function(){
                this.message++
            }
        },
        beforeCreate() {
            console.log("1 beforeCreate 初始化之后")
        },
        created() {
            console.log("2 created 创建完成")
        },
        beforeMount() {
            console.log("3 beforeMount 挂载之前")
        },
        mounted() {
            console.log("4 mounted 被创建")
        },
        beforeUpdate () {
            console.log("5 beforeUpdate 数据更新前")
        },
        updated () {
            console.log("6 updated 被更新后")
        },
        activated() { //keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
            console.log("7 activated")
        },
        deactivated() { //keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
            console.log("8 deactived")
        },
        beforeDestroy(){
            console.log("9 beforeDestroy 销毁之前")
        },
        destroyed () {
            console.log("10 destroyed")
        }
    })
</script>
</html>